<!DOCTYPE html>
<html>
<head>
	<!-- smoke test marker: WeeWikiPaint home page -->
	<title>WeeWikiPaint</title>

	<!-- #cat min.css -->
	<link rel="stylesheet" type="text/css" href="./vendor/normalize-3.0.2.css">
	<link rel="stylesheet" type="text/css" href="./screen.css">
	<!-- endcat -->

	<script src="vendor/jquery-1.8.3.min.js" type="text/javascript"></script>
	<script src="vendor/raphael-2.1.2.min.js" type="text/javascript"></script>
	<!-- #cat app.min.js -->
	<script src="bundle.js" type="text/javascript"></script>
	<!-- endcat -->

	<!-- Typekit -->
	<script>
		(function(d) {
			window.wwp_loadedFonts = [];
			window.wwp_typekitDone = false;

			function done() {
				window.wwp_typekitDone = true;
			}

			var config = {
				kitId: 'qzr7zlc',
				scriptTimeout: 3000,
				active: done,
				inactive: done,
				fontactive: function(family, variant) {
					window.wwp_loadedFonts.push({
						family: family,
						variant: variant
					});
				}
			},
			h = d.documentElement,
			t = setTimeout(function() {
				h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
				done();
			}, config.scriptTimeout),
			tk = d.createElement("script"),
			f = false,
			s = d.getElementsByTagName("script")[0],
			a;

			h.className += " wf-loading";
			tk.src = '//use.typekit.net/' + config.kitId + '.js';
			tk.async = true;
			tk.onload = tk.onreadystatechange = function() {
				a = this.readyState;
				if (f || a && a != "complete" && a != "loaded")return;
				f = true;
				clearTimeout(t);

				try {Typekit.load(config)} catch(e) { console.log(e); }
			};
			s.parentNode.insertBefore(tk, s)
		})(document);
	</script>

</head>
<body class="theme-lets-code">

	<div id="logo" class="logo layout-center" style="margin-top: 12px;">
		<img src="/images/weewiki-logo.png" width="181" height="25" alt="WeeWikiPaint">
	</div>

	<p id="tagline" class="layout-center layout-center-text" style="margin-top: 5px; margin-bottom: 0px;">WeeWikiPaint is a nifty doodling tool. Go on, give it a try!</p>

	<div id="drawing-area-container" class="layout-width-full layout-center drawing-area" style="margin-top: 10px;">
		<div id="drawing-area" class="drawing-area__canvas"></div>
		<div id="drawing-area-arrow" class="drawing-area__arrow"></div>
		<button id="clear-button" type="button" class="drawing-area__button button button--drawing">Clear</button>
	</div>

	<p id="footer" class="layout-center layout-center-text" style="margin-top: 13px; margin-bottom: 0;">
		<strong id="footer-text">We’re developing this site LIVE at Let’s Code: Test-Driven JavaScript!</strong>
	</p>

	<a id="join-us" class="layout-width-button layout-center button button--action" style="margin-top: 13px;" href='http://www.letscodejavascript.com'>Join Us!</a>

	<script type="text/javascript">
		$(function() {
			var client = require("./client.js");
			var HtmlElement = require("./html_element.js");

			client.drawingAreaCanvas = client.initializeDrawingArea({
				drawingAreaDiv: HtmlElement.fromId("drawing-area"),
				clearScreenButton: HtmlElement.fromId("clear-button")
			});
		});
	</script>

</body>
</html>